<!--
 * @Author: zls 3292844045@qq.com
 * @Date: 2022-05-24 14:18:53
 * @LastEditors: zls 3292844045@qq.com
 * @LastEditTime: 2022-05-27 15:46:34
 * @FilePath: \CUCCL\html\register.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册-古驰GUCCI中国官方网站</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_3418519_5teuh194lbw.css"
    />
    <link rel="stylesheet" href="../css/init_css/reset.css" />
    <link rel="stylesheet" href="../css/main_css/main.css" />
    <link rel="stylesheet" href="../css/main_css/login/login.css" />
    <link rel="stylesheet" href="../css/main_css/register/register.css" />
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <!-- 头部部分 -->
    <header class="splice-header">
      <div class="splice-container header-transparent">
        <nav class="splice-navbar">
          <!-- logo部分 -->
          <div class="splice-navbar-top">
            <!-- 三部分, 左侧 中间 右侧 -->
            <div class="splice-navbar-left">
              <ul>
                <li>
                  <a href="">
                    <i
                      class="iconfont icon-wxbdingwei"
                      style="opacity: 0.5"
                    ></i>
                    <span>配送至：</span>
                    <span>中国大陆地区</span>
                  </a>
                  <!-- 鼠标滑过显示下方隐藏的div -->
                  <!-- <div class="splice-sub-menu splic-sub-menu-hidden">
                          <h6>网上商城</h6>
                          <p>请注意，在浏览过程中更改您的位置将会清除购物袋中的所有商品。</p>
                      </div> -->
                </li>
                <li>
                  <a href="">
                    <span>客户服务</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <i class="iconfont icon-dianhua"></i>
                    <span>400.8210.582</span>
                  </a>
                </li>
              </ul>
            </div>

            <div class="splice-navbar-right">
              <a class="login">登录</a>
              <!-- //心愿单 -->
              <a href="" class="splice-nav-savedItems">
                <i class="iconfont icon-icon"></i>
              </a>
              <!-- 购物车 -->
              <a href="" class="shopping-cart">
                <i class="iconfont icon-gouwudai"></i>
                <span>购物车</span>
              </a>

              <!-- //搜索框 -->
              <a class="header-search"> </a>
            </div>
            <div class="splice-navbar-logo">
              <a href="https://www.gucci.cn/zh/">
                <img
                  src="https://res.gucci.cn/images/common/gucci-logo@2x.png"
                  alt="GUCCI"
                />
              </a>
            </div>
          </div>
          <!-- logo下面菜单 -->
          <div class="splice-navbar-menu">
            <ul class="splice-nav">
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">全球资讯</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">手袋</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">女士</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">男士</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">童装</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">礼品</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">珠宝和腕表</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">美妆</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">生活和艺术</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>

    <!-- 中间部分 -->
    <section class="spice_container">
      <article class="spice_article">
        <div class="spice_title">
          <h2>注册</h2>
          <img src="../images/tag.png" alt="" />
        </div>
      </article>

      <article class="spice_register">
        <div class="div_regi_name">
          <!-- <div class="username">
                <span>用户名：</span>
                <input type="text" placeholder="请输入用户名">
            </div>
            <div class="password">
                <span>密码：</span>
                <input type="text" placeholder="请输入密码">
            </div> -->
          <ul>
            <li>用户名</li>
            <li>密码</li>
            <li>Email</li>
            <li>昵称</li>
            <li>手机号</li>
            <li>性别</li>

            <li>验证码</li>
          </ul>
        </div>
        <div class="div_regi_input">
          <ul>
            <li>
              <input type="text" class="username" placeholder="请输入用户名" />
              <span></span>
            </li>
            <li>
              <input type="text" class="passwrod" placeholder="请输入密码" />
              <span></span>
            </li>
            <li>
              <input type="text" class="email" placeholder="请输入email" />
              <span></span>
            </li>
            <li>
              <input type="text" class="name" placeholder="请输入昵称" />
              <span></span>
            </li>
            <li>
              <input type="text" class="tel" placeholder="请输入手机号" />
              <span></span>
            </li>
            <li class="gender">
              <input
                type="radio"
                name="gender"
                value="male"
                class="male"
                checked
              />
              男
              <input type="radio" name="gender" value="female" class="female" />
              女
            </li>

            <li class="check_code">
              <input id="code" name="code" class="check" type="text" />
              <span id="random_code"></span>
              <button id="refresh">刷新验证码</button>
              <span id="res_check"></span>
            </li>
          </ul>
        </div>
      </article>
      <div class="reg_btn">
        <button class="btn_regi">注册</button>
      </div>
    </section>

    <!-- 尾部 -->
    <footer class="splice_footer">
      <!-- 尾部主体 -->
      <div class="splice_container">
        <!-- 返回顶部 -->
        <div class="splice_back_top">
          <i class="iconfont icon-xiangshangjiantou"></i>
        </div>
        <!-- 尾部内容 -->
        <div class="splice_footer_content">
          <!-- 左边 -->
          <div class="splice_footer_left">
            <ul>
              <!-- 免费服务 -->
              <li class="spice_exclusive_service">
                <div class="spice_footer_title">
                  <span>专属服务</span>
                </div>
                <ul class="spice_all">
                  <li><span>免费标准配送</span></li>
                  <li><span>免费礼品包装</span></li>
                  <li><span>预约门店服务</span></li>
                </ul>
              </li>
              <!-- 购买帮助 -->
              <li class="spice_shoping_help">
                <div class="spice_footer_title">
                  <span>购物帮忙</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>支付相关</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>配送</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>退换货</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>发票</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>保养与维修</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 关于公司 -->
              <li class="spice_about_company">
                <div class="spice_footer_title">
                  <span>关于公司</span>
                </div>

                <ul>
                  <li>
                    <a href="">
                      <span>关于GUCCI</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>GUCCI EQUILIBRIUM</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>道德规范</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>职业发展</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>细则及条款</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>隐私与COOKIE</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>企业信息</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 联系方式 -->
              <li class="spice_follow_gucci">
                <div class="spice_footer_title">
                  <span>关注GUCCI</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>微信</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>微博</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>抖音</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>腾讯视频</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>小红书</span>
                    </a>
                  </li>

                  <li class="slice_footer_tails">
                    <a href="">
                      <span>在线顾问</span>
                    </a>
                  </li>
                  <li class="slice_footer_tails">
                    <a href="">
                      <span>400.8210.582</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 需要帮助 -->
              <li class="spice_need_help">
                <div class="spice_footer_title">
                  <span>需要帮助?</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>联系我们</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>常见问题</span>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- 右边 -->
          <div class="splice_footer_right">
            <div class="splice_footer_right_content">
              <div class="spice_form_group">
                <div class="spice_form_title">订阅GUCCI电子资讯</div>
                <div class="spice_form_content">
                  <p class="spice_form_info">
                    通过订阅，即代表您接受GUCCI的
                    <a href=""> 隐私政策条款 </a>
                  </p>
                  <div class="spice_form_input">
                    <input
                      type="text"
                      name=""
                      id=""
                      placeholder="电子邮件地址"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <script src="../js/api.js"></script>
    <script>
      // 获取标签对象
      // 鼠标滚动收起
      $(window).scroll(() => {
        // console.log();
        if ($(document).scrollTop() >= 20) {
          // console.log(1);
          $(".splice-container").removeClass("header-transparent");
          $(".splice-container").addClass("_compressed ");
        } else {
          $(".splice-container").removeClass("_compressed ");
          $(".splice-container").addClass("header-transparent");
        }
      });

      // 登录验证
      let $isUser = false;
      let $isPwd = false;
      let $isEmail = false;
      let $isName = false;
      let $isTel = false;
      let $isCheck = false;
      let check_all = function () {
        // 用户名是否正确
        $isUser = false;
        $isPwd = false;
        $isEmail = false;
        $isName = false;
        $isTel = false;
        $isCheck = false;

        // 校验用户名
        $(".username").on("blur", function () {
          let $user = $(".username").val();
          // console.log(user);
          $user = $.trim($user);
          if (!$user) {
            $(".username").next().html("输入不能为空");
          }
          const reg = /^[A-Za-z][\w$]{5,11}$/;
          if (reg.test($user)) {
            $isUser = true;
            $(".username").next().removeClass();
            $(".username").next().html("√");
            $(".username").next().addClass("right");
          } else {
            $(".username").next().removeClass();
            $(".username")
              .next()
              .html(
                "名字只能包含数字、字母，数字不可以开头，长度不低于6，不长于12"
              );
            $(".username").next().addClass("false");
          }
        });

        // 检验密码
        $(".passwrod").on("blur", () => {
          let $pwd = $(".passwrod").val();
          let flag = 0;
          $pwd = $.trim($pwd);
          if (!$pwd) {
            $(".pwd").next().html("输入不能为空");
          }
          const reg = /^[\w]{5,11}$/;
          if (reg.test($pwd)) {
            if (/[a-z]/.test($pwd)) {
              flag++;
            }
            if (/[A-Z]/.test($pwd)) {
              flag++;
            }
            if (/\d/.test($pwd)) {
              flag++;
            }
            $isPwd = true;
            $(".passwrod").next().removeClass();
            $(".passwrod").next().addClass("right");
            if (flag === 3) {
              $(".passwrod").next().html("强");
            } else if (flag === 2) {
              $(".passwrod").next().html("中");
            } else {
              $(".passwrod").next().html("弱");
            }
          } else {
            $isPwd = false;
            $(".passwrod").next().removeClass();
            $(".passwrod").next().html("密码6-12位 不能包含特殊字符");
            $(".passwrod").next().addClass("false");
          }
        });

        // 检验邮箱
        $(".email").on("blur", () => {
          let $email = $(".email").val();
          $email = $.trim($email);
          if (!$email) {
            $(".email").next().html("输入不能为空");
          }

          const reg = /^([A-Za-z0-9_])+(@[A-Za-z0-9_]+.com)$/;
          if (reg.test($email)) {
            $isEmail = true;
            $(".email").next().removeClass();
            $(".email").next().html("√");
            $(".email").next().addClass("right");
          } else {
            $isEmail = false;
            $(".email").next().removeClass();
            $(".email").next().html("请输入合法的邮箱格式");
            $(".email").next().addClass("false");
          }
        });

        // 检验昵称
        $(".name").on("blur", () => {
          let $name = $(".name").val();
          $name = $.trim($name);
          if (!$name) {
            $(".name").next().html("输入不能为空");
          }

          const reg = /^[\u4e00-\u9fa5]{2,4}$/;
          if (reg.test($name)) {
            $isName = true;
            $(".name").next().removeClass();
            $(".name").next().html("√");
            $(".name").next().addClass("right");
          } else {
            $isName = false;
            $(".name").next().removeClass();
            $(".name").next().html("请输入2-4位中文");
            $(".name").next().addClass("false");
          }
        });

        // 检验手机号
        $(".tel").on("blur", () => {
          let $tel = $(".tel").val();
          $tel = $.trim($tel);
          if (!$tel) {
            $(".name").next().html("输入不能为空");
          }

          const reg = /^[1][\d]{10}$/;
          if (reg.test($tel)) {
            $isTel = true;
            $(".tel").next().removeClass();
            $(".tel").next().html("√");
            $(".tel").next().addClass("right");
          } else {
            $isTel = false;
            $(".tel").next().removeClass();
            $(".tel").next().html("输入正确的手机号码");
            $(".tel").next().addClass("false");
          }
        });

        // // 检验验证码
        randCode();
        let str = randCode();
        console.log(str);
        $("#random_code").html(str);

        $(".check").on("blur", () => {
          let $check = $(".check").val();
          $check = $.trim($check);
          if (!$check) {
            $(".check").next().html("输入不能为空");
          }
          if ($(".check").val() == $("#random_code").html().toLowerCase()) {
            $isCheck = true;
            console.log(1);
            $("#res_check").removeClass();
            $("#res_check").html("验证成功");
            $("#res_check").addClass("right");
          } else {
            let str = randCode();
            $("#random_code").html(str);
            $(".check").val("");
          }
        });

        $("#refresh").on("click", () => {
          // console.log(1);
          let str = randCode();
          $("#random_code").html(str);
          $('.check').val("");
          $("#res_check").html("");
          $isCheck = false;
          
        });

        console.log($isUser);
      };

      check_all();

      $(".btn_regi").on("click", async () => {
        let tel = $(".tel").val(); 
        let user = $(".username").val();
        let pwd = $(".passwrod").val();
        let email = $(".email").val();
        let dear = $(".name").val();
        let male;
        if($('.male').prop('checked')){
          male = "男";
        }else{
          male = "女";
        }
        console.log(male);

        // = 

        if ($isUser && $isPwd && $isEmail && $isName && $isTel && $isCheck) {
          // 对比数据库中看有没有注册过
          let res = await register({
            tel,
            user,
            pwd,
            email,
            dear,
            male
          });
          console.log(res);
          if(res['status']){
            alert(res['msg']);
            location.href = './login.html';
          }else{
            alert(res['msg']);
          }
        } else {
          alert("请填写注册信息");
        }
      });

      //   生成校验码
      function randCode() {
        var numList = [];
        for (var i = 48; i <= 57; i++) {
          var char = String.fromCharCode(i);
          numList.push(char);
        }
        var bigList = [];
        for (var i = 65; i <= 90; i++) {
          var char = String.fromCharCode(i);
          bigList.push(char);
        }

        var smallList = [];
        for (var i = 97; i <= 122; i++) {
          var char = String.fromCharCode(i);
          smallList.push(char);
        }
        let small = 0;
        let big = 0;
        let num = 0;
        let str = "";
        var codeList = numList.concat(bigList, smallList);

        for (let i = 0; i < 4; i++) {
          let x = codeList[parseInt(Math.random() * codeList.length)];
          // console.log(x);
          str += x;
          if (numList.includes(x)) {
            num = 1;
          }
          if (bigList.includes(x)) {
            big = 1;
          }
          if (smallList.includes(x)) {
            small = 1;
          }
        }

        if (num == 1 && big == 1 && small == 1) {
          return str;
        } else {
          return randCode();
        }
      }
    </script>
  </body>
</html>
